Portafolio de Actividades

Redes digitales y laboratorio de Redes Digitales

Departamento de Ciencias e Ingenierías | Universidad Iberoamericana Puebla, México.

Actividad | Aplicación de inputs en html.

Mary Tere Füguemann Sardá
Ingeniería Mecatrónica
Maximo Arenas Roa
Ingeniería Mecatrónica
Fecha: Junio, 2024
Replit HTML

- Resumen -

En esta actividad se elaboró un index en donde se exploraran los distintos tipos de inputs para observar sus características, diferencias y aplicaciones.

- Introducción -

Los inputs en HTML permiten la entrada de datos mediante diferentes tipos de campos, como campos de texto, contraseñas, correos electrónicos, números, fechas y más. Cada tipo de input está diseñado para manejar un tipo específico de dato y se configura mediante el atributo type, que define el comportamiento y la apariencia del control. Por ejemplo, type="text" crea un campo de texto estándar, mientras que type="password" genera un campo de texto enmascarado para contraseñas.

La versatilidad de los inputs en HTML no solo se limita a la variedad de tipos disponibles, sino también a la capacidad de personalización mediante atributos adicionales. Estos atributos pueden especificar detalles como valores predeterminados, restricciones de entrada (longitud máxima, patrones específicos), y mensajes de ayuda, mejorando así la experiencia del usuario y la validez de los datos ingresados.

- Desarrollo -

Realizar un mustreario de todos los tipos de inputs.

Resultados

Se comenzó por identificar los diferentes tipos de inputs y sus nombres, como se muestra a continuación.

...

Posteriomente se realizó un código en donde se mandaran a llamar todos los index, para observar el funcionamiento de cada uno de ellos.

...

Finalmente, al correr el programa se actualizó la página y se observó que cada input cumplía con su función. Para ello se le asignaron diveros nombres que simplifican el uso de cada input. Como se muestra a continuación:

...

- Conclusiones -

Cada tipo de input tiene su propio conjunto de características y usos adecuados, lo que facilita la recolección de datos de manera eficiente y segura. Por ejemplo, los inputs de tipo email y tel están optimizados para la validación de direcciones de correo electrónico y números de teléfono, respectivamente, mejorando la precisión de los datos ingresados. Por otro lado, los inputs de tipo date y range proporcionan interfaces amigables para la selección de fechas y valores numéricos dentro de un rango específico.

La comparación entre estos tipos de inputs revela que, aunque algunos pueden parecer similares en función, cada uno está diseñado para optimizar la experiencia del usuario y la integridad de los datos en distintos contextos. A través de esta práctica, hemos destacado la importancia de seleccionar el tipo de input adecuado según el tipo de dato requerido y el contexto de uso, lo que resulta crucial para la creación de formularios efectivos y accesibles.

Finalmente, esta práctica subraya la necesidad de considerar tanto la usabilidad como la validación de datos al diseñar formularios web. Al aprovechar las capacidades de los diferentes tipos de inputs en HTML, los desarrolladores pueden crear interfaces más intuitivas y robustas, contribuyendo a una mejor interacción del usuario y a la calidad de la información recolectada.

- Descargables -

Descargar index: Index.html